<template>
  <div class="page-content">
    <div class="comm-content" ref="main"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myEcharts: null,
    };
  },
  methods: {
    // 屏幕适配
    screen() {
      this.myEcharts.resize(); // 检测屏幕尺寸
      let width = this.$refs.main.offsetWidth; // 获取echarts可是宽度
      let num = (width / 100) * 5; // 设置字体
      let innerRadius = num * 2; // 内圆觉的值
      let outerRadius = innerRadius * 1; // 外圆的值
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
        // series:seriesRadius
      };
      this.myEcharts.setOption(options);
    },
    initEcharts() {
      let main = this.$refs.main;
      this.myEcharts = this.$echarts.init(main,this.themeStatus);

      /** @type EChartsOption */
      let options = {
        title: {
          text: "种植农作物面积占比",
          // textStyle: {
          //   fontSize: 50,
          // },
        },
        tooltip: {
          show: true,
        },
        legend: {
          orient: "horizontal",
          left: 5,
          show: true,
          icon: "circle",
          top: "10%",
        },
        series: [
          {
            type: "pie",
            radius: '50%',
            top: "10%",
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
    async getData() {
      let dataList = await this.$http("/api/TotalAreaCropsProportion");
      console.log(dataList);
      let seriesData = dataList.data.map((item) => {
        return {
          name: item.name,
          value: item.value,
        };
      });
      let options = {
        series: [
          {
            data: seriesData,
          },
        ],
      };
      this.setEcharts(options);
    },
    setEcharts(options) {
      this.myEcharts.setOption(options);
      this.screen();
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener("resize", this.screen);
  },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
